<template>
  <f7-page>
    <f7-navbar title="个人中心">
      <f7-nav-right>
        <f7-link icon-f7="gear" href="/setting/general/"></f7-link>
      </f7-nav-right>
    </f7-navbar>
    <div class="userInfo">
      <f7-list media-list>
        <f7-list-item link="/setting/user/" :title="user.userName" :subtitle="lastLoginDate">
          <f7-icon slot="media">
            <img src="../../assets/img/img_user_me.png" class="user_img" style="width: 60px; height: 60px; border-radius: 30px;"/>
          </f7-icon>
        </f7-list-item>
      </f7-list>
    </div>

    <f7-list>
      <f7-list-item title="账号绑定" link="/setting/oauths"></f7-list-item>
    </f7-list>

    <f7-list class="userlist">
      <f7-list-item @click="logout">
        <f7-list-item-cell>
          <f7-list-item-row>
            <f7-list-item-cell class="text-align-center logout">
              <f7-link text="退出登录"></f7-link>
            </f7-list-item-cell>
          </f7-list-item-row>
        </f7-list-item-cell>
      </f7-list-item>
    </f7-list>
    <f7-viewbar-instince slot="fixed"></f7-viewbar-instince>
  </f7-page>
</template>
<script>
import controller from "@/libs/framework/controller";

export default class instance extends controller {
  async getViewModel() {
    let user = await this.$framework.account.getUser();
    this.bind({ user: user });
  }
  mixin() {
    return {
      methods: {
        logout() {
          this.$framework.account.logout();
        }
      },
      computed: {
        lastLoginDate: function() {
          return (
            "最近登录：" +
            this.$framework.formatter.formatDateTime(this.user.lastLoginDate)
          );
        }
      },
      mounted() {
        if (this.user.profile && this.user.profile.photoUrl) {
          vue.$framework.resourceLoader.load(this.user.profile.photoUrl).then((path) => {
            // 返回的是图片的网络路径，可直接设置在img的src属性上
            if (window.qmplus.isWeb()) {
                this.super.$(".user_img").attr("src", path);
              } else {
                window.qmplus.io.getRemoteURL(path).then(p => {
                  this.super.$(".user_img").attr("src", p);
                });
              }
          });
        }
      }
    };
  }
}
</script>
